import Vue from 'vue'

import Cookies from 'js-cookie'

import Element from 'element-ui'
import './assets/styles/element-variables.scss'

import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App'
import store from './store'
import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import {download} from '@/utils/request'
import ossFile from '@/utils/app.image'

//封装的图片视频方法
import { getMedieUrl, getOssVideoCover } from '@/utils/pathEncapsulation'

import './assets/icons' // icon
import './permission' // permission control
import {getDicts} from "@/api/system/dict/data";
import {getConfigKey} from "@/api/system/config";
import {addDateRange, handleTree, parseTime, resetForm, selectDictLabel, selectDictLabels} from "@/utils/ruoyi";
// 分页组件
import Pagination from "@/components/Pagination";
// 自定义表格工具组件
import RightToolbar from "@/components/RightToolbar"
// 富文本组件
import Editor from "@/components/Editor"
// 文件上传组件
import FileUpload from "@/components/FileUpload"
// 图片上传组件
import ImageUpload from "@/components/ImageUpload"
// 图片预览组件
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
//字典下拉选择
import DictSelect from "@/components/DictSelect";
import OssImagePreview from "@/components/ImagePreview/oss-image-preview.vue";
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
import DictData from '@/components/DictData'
//国家化
import i18n from './lang/index'
// 百分比输入框
import percentage from '@/components/percentage'
import * as $yun from '@/utils/yun'
import { deepClone } from "@/utils/index";
// 表格内图片点击名字弹窗查看
import ImageCickPreview from '@/components/ImageCickPreview'
// svga上传组件
import ossUploadSvga from '@/components/ossUploadSvga/ossUploadSvga.vue'
// 获取0时区时间戳
import timeConvert from "@/components/timeConvert/index.vue";

// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
Vue.prototype.$yun = $yun
Vue.prototype.$deepClone = deepClone
Vue.prototype.$getMedieUrl = getMedieUrl
Vue.prototype.$getOssVideoCover = getOssVideoCover
Vue.prototype.$ossFile = ossFile



// 全局组件挂载
Vue.component('DictTag', DictTag)
Vue.component('DictSelect', DictSelect)
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component('percentage', percentage)
Vue.component('OssImagePreview', OssImagePreview)
Vue.component('ImageCickPreview', ImageCickPreview)
Vue.component('ossUploadSvga', ossUploadSvga)
Vue.component('timeConvert', timeConvert)

Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
DictData.install()


//解决国际化导致的form表单布局紊乱问题
// Element.Form.mixins = [{
//   created() {
//     if (this.inline) {
//       this.labelWidth = null
//     }
//   }
// }]

// more 用于el-select 触底事件
import loadMore from '@/utils/loadMore' // 下拉加载更多
Vue.use(loadMore);

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online! ! !
 */

Vue.use(Element, {
  size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

Element.Table.props.border.default = true
Element.Table.props.maxHeight.default = 968
Element.TableColumn.props.showOverflowTooltip.default = true
Element.InputNumber.props.controlsPosition.default = 'right'
Element.InputNumber.props.controls.default = false
Element.Form.props.labelWidth.default = 'auto'
Element.Dialog.props.closeOnClickModal.default = false // 全局关闭点击弹窗遮罩层不关闭
// // //中文环境定宽
Element.TableColumn.props.renderHeader.default = function (h, {column, $index}) {
  //开发环境是中文 所以不存在表格宽度错误问题
  if (this.$i18n.locale != 'zh') {
    let span = document.createElement('span');
    span.innerText = column.label;
    document.body.appendChild(span);
    const realWidth = span.getBoundingClientRect().width + 39
    //中文环境定了列宽 但是英文国家化列头宽度不够 这时候取国际化的宽度
    if (column.width != null && column.width < realWidth || column.width == null) {
      column.width = column.minWidth = realWidth
    }
    document.body.removeChild(span);
  }
  return h('span', column.label);
}







